<!--
author: 何其沆(pooky)
desc: 月度列表
date: 2021-11-18
-->
<template>
  <div class="statistics-table-right">
    <columnItem title="Weekly Tasks" :data="mData[0]" />
    <columnItem title="Monthly Tasks" :data="mData[1]" />
    <columnItem title="1st" :data="mData[4]" />
    <columnItem title="1st(%)" :data="mData[5]" />
    <columnItem title="2nd" :data="mData[6]" />
    <columnItem title="2nd(%)" :data="mData[7]" />
    <columnItem title="3rd" :data="mData[8]" />
    <columnItem title="3rd(%)" :data="mData[9]" />
    <columnItem title="4th" :data="mData[10]" />
    <columnItem title="4th(%)" :data="mData[11]" />
    <columnItem v-if="mData[12] && mData[12].length > 0" title="5th" :data="mData[12]" />
    <columnItem v-if="mData[13] && mData[13].length > 0" title="5th(%)" :data="mData[13]" />
    <columnItem title="Monthly Total" :data="mData[2]" />
    <columnItem title="Monthly Total(%)" :data="mData[3]" />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useStore } from 'vuex'

import columnItem from './columnItem.vue'
const store = useStore()
/**
 * 月数据
 * @type {ComputedRef<[]|*>}
 */
const monthData = ref(
  computed(() => {
    return store.state.pm.adminMonthData
  })
)
const mData = ref([])
/**
 * 监听数据变化
 */
watch(
  monthData,
  newValue => {
    mData.value = []
    const a1 = []
    const a2 = []
    const a3 = []
    const a4 = []
    const a5 = []
    const a6 = []
    const a7 = []
    const a8 = []
    const a9 = []
    const a10 = []
    const a11 = []
    const a12 = []
    const a13 = []
    const a14 = []
    if (newValue.data.phaseData) {
      for (let i = 0; i < newValue.data.phaseData.length; i++) {
        const res = newValue.data.phaseData[i]
        a1.push(res.weeklyTasks)
        a2.push(res.monthlyTasks)
        a3.push(res.total)
        a4.push(res.totalCompletion)
        for (let j = 0; j < res.phaseResultData.length; j++) {
          if (res.phaseResultData[j].name === '1st') {
            a5.push(res.phaseResultData[j].result)
            a6.push(res.phaseResultData[j].completion)
          } else if (res.phaseResultData[j].name === '2nd') {
            a7.push(res.phaseResultData[j].result)
            a8.push(res.phaseResultData[j].completion)
          } else if (res.phaseResultData[j].name === '3rd') {
            a9.push(res.phaseResultData[j].result)
            a10.push(res.phaseResultData[j].completion)
          } else if (res.phaseResultData[j].name === '4th') {
            a11.push(res.phaseResultData[j].result)
            a12.push(res.phaseResultData[j].completion)
          } else if (res.phaseResultData[j].name === '5th') {
            a13.push(res.phaseResultData[j].result)
            a14.push(res.phaseResultData[j].completion)
          }
        }
      }
    }
    mData.value.push(a1)
    mData.value.push(a2)
    mData.value.push(a3)
    mData.value.push(a4)
    mData.value.push(a5)
    mData.value.push(a6)
    mData.value.push(a7)
    mData.value.push(a8)
    mData.value.push(a9)
    mData.value.push(a10)
    mData.value.push(a11)
    mData.value.push(a12)
    mData.value.push(a13)
    mData.value.push(a14)
  },
  {
    deep: true
  }
)
</script>

<style scoped lang="less">
@import './common.less';
</style>
